<template>
  <div class="page" >
    <div style="width:100%;">
      <mt-header fixed :title="$t('notification')" style="background:#242D36;color:#fff;border-bottom:1px solid #d2d2d2;">
        <!-- <div slot="left">
          <router-link to="/index" slot="left" style="text-decoration: none;color: #fff;">
            <mt-button icon="back"></mt-button>
          </router-link>
        </div> -->
      </mt-header>
      <div style="width: 100%;height:.95rem;"></div>
      <div class="gonggao-border" v-for="(item,index) in gonglist" :key="index">
        <div class="gonggao-list">
          <div class="gonggao-title">{{item.title}}</div>
          <div class="gonggao-info" v-html="item.content"></div>
          <div class="gonggao-time">{{item.created_at}}</div>
        </div>
      </div>

      <div>
        <commonFooter active="gonggao"></commonFooter>
      </div>
    </div>
  </div>
</template>

<script>
  import commonFooter from './footer';
	export default {
		data() {
			return {
				gonglist: []
			};
		},
    components: {
      commonFooter, //  底部导航
    },
		computed: {},
		mounted() {
			this.change();
		},
		methods: {
			change() {
				this.$get('addons/tf-futures/article/notice?originContent=1').then(res => {
					if (res.code == 200) {
						if (res.data.length == 0) {
							this.$message.error('暂无公告信息！');
						}
						this.gonglist = res.data;
					}
				})
			}
		}
	};
</script>

<style scoped>
  .page{
    background:#242D36;
    color: #f0f0f0;
  }
	.gonggao-border {
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
		margin-top: 10px;
	}

	.gonggao-list {
		border: 1px solid #000000;
		border-radius: 5px;
		box-sizing: border-box;
		padding: 10px;
	}

	.gonggao-list .gonggao-title {
		width: 100%;
		/* height: 30px; */
    text-align: center;
		margin-bottom: 10px;
    font-size: 0.5rem;
	}

	.gonggao-list .gonggao-info {
    padding: 15px;
		width: 100%;
	}

	.gonggao-list .gonggao-time {
		text-align: right;
		width: 100%;
		height: 30px;
	}
</style>
